<html>
  <head>
  <meta charset="UTF-8">
  </head>
  <body>
    <div id="game"></div>
    <script type="text/javascript" src="https://rawgithub.com/craftyjs/Crafty/release/dist/crafty-min.js"></script>
    <script>
	
	var assetsObj = {
		"sprites": {
			"./res/jingling.png": {
				tile: 104,
				tileh: 114,
				map: {
					walker_start: [0, 0],
					walker_middle: [7, 0],
					walker_end: [7, 1]
				}
			}
		}
	};

	window.onload = function() {
		Crafty.init(400, 400);  
		Crafty.load(assetsObj, go);
		
	};

	
	
	function go() {
		//帧动画 指定播放顺序
		var walker = Crafty.e('2D, Canvas, walker_start, SpriteAnimation')
			.reel("walking", 1000, [
				[0, 0], [1, 0], [2, 0], [3, 0], [4, 0], [5, 0], [6, 0], [7, 0],
				[0, 1], [1, 1], [2, 1], [3, 1], [4, 1], [5, 1], [6, 1], [7, 1]
			])
			.animate("walking", -1);
			
			walker.bind('EnterFrame', function(){
				if (this.x < 200) {
					this.x = this.x + 1;
				}else if(this.x == 200){
					
					var wText = Crafty.e('2D, DOM, Text')
					  .attr({
						x: 10,
						y: 10
					  });

					  wText.textFont({
					  size: '18px',
					  weight: 'bold'
					});
					wText.text('落叶大人，我怎么走不动了');
				}
			});
			
	}
	  
    </script>
  </body>
</html>